<template>
  <div class="bgc-default1 pad-20">
    <!-- 直播间信息 -->
    <div class="bg-color-white pad-20">
      <div>
        <div class="base-info">
          <div class="base-info_item flex">
            <div class="flex">
              <div class="room-img-box">
                <img :src="liveRoom.coverImg" alt="">
              </div>
              <div class="mar-l-20">
                <div class="font-18 mar-b-30 font-w">{{liveRoom.roomName}}</div>
                <div class="font-14 mar-t-2">
                  <span class="font-color-3">开播时间：</span>
                  <span>{{liveRoom.startDate}} - {{liveRoom.endDate}}</span>
                </div>
                <div class="font-14 mar-t-2">
                  <span class="font-color-3">房间号：</span>
                  <span>{{liveRoom.roomId}}</span>
                </div>
                <div class="font-14 mar-t-2">
                  <span class="font-color-3">主播：</span>
                  <span>{{liveRoom.anchorName}}</span>
                </div>
                <div class="font-14 mar-t-2">
                  <span class="font-color-3">主播微信号：</span>
                  <span>{{liveRoom.anchorWechat}}</span>
                </div>
                <div class="font-14 mar-t-2">
                  <span class="font-color-3">主播副号：</span>
                  <span>{{liveRoom.subAnchorWechat}}</span>
                </div>
              </div>
            </div>
            <div class="font-32 flex font-color-3">
              <span class="bule-dot mar-t-10 mar-r-10"></span>
              <span v-if="liveRoom.liveStatus == '101'">直播中</span>
              <span v-if="liveRoom.liveStatus == '102'">未开始</span>
              <span v-if="liveRoom.liveStatus == '103'">已结束</span>
              <span v-if="liveRoom.liveStatus == '104'">禁播</span>
              <span v-if="liveRoom.liveStatus == '105'">暂停中</span>
              <span v-if="liveRoom.liveStatus == '106'">异常</span>
              <span v-if="liveRoom.liveStatus == '107'">已过期</span>
            </div>
          </div>
        </div>
      </div>
      <div class="base-info mar-t-30">
        <div class="base-info_item">
          <el-tabs v-model="activeName">
            <el-tab-pane label="商品" name="1">
              <div class="flex flex-between">
                <el-button type="primary" @click="dialogFormVisible=true">导入商品</el-button>
                <div>
                  <div class="float-l">
                    <el-input v-model="liveRoomGoodsTitle" clearable placeholder="请输入商品名称" style="width: 228px" class="mar-r-16"></el-input>
                    <el-button class="group-b-left" type="primary" size="small" @click="pagingLiveRoomGoods">查询</el-button>
                    <el-button class="group-b-right" size="small" @click="resetLiveRoomGoods">重置</el-button>
                  </div>
                </div>
              </div>
              <!-- 内容列表 -->
              <div class="table-container mar-t-20">
                <el-table :data="liveRoomGoodsList" element-loading-text="加载中" style="width: 100%" >
                  <el-table-column min-width="400px" label="基本信息" fixed="left">
                    <template slot-scope="scope">
                      <div class="flex v-align-c cursor-p">
                        <label><img :src="scope.row.goodsImgUrl" class="user-avatar" style="width: 68px;height: 68px;" /></label>
                        <div class="font-14 pad-l-10 goods-title">
                          <div>{{ scope.row.title }}</div>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column width="200px" label="价格">
                    <template slot-scope="scope">
                      <span v-if="scope.row.priceType === 1">￥{{ scope.row.price }}</span>
                      <span v-if="scope.row.priceType === 2">￥{{ scope.row.minPrice }}~￥{{ scope.row.maxPrice }}</span>
                      <span v-if="scope.row.priceType === 3">
                        <span>原价￥{{ scope.row.originalPrice }}元</span><br />
                        <span>现价￥{{ scope.row.nowPrice }}</span>
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column width="100px" label="状态">
                    <template slot-scope="scope">
                      {{dict.goodsStatus[scope.row.goodsStatus]}}
                    </template>
                  </el-table-column>
                  <el-table-column width="150px" label="操作">
                    <template slot-scope="scope">
                      <el-button v-if="scope.row.goodsStatus == 0" type="text" size="medium" @click="updateLiveRoomGoods(scope.row, 1)">上架</el-button>
                      <el-button v-if="scope.row.goodsStatus == 1" type="text" size="medium" @click="updateLiveRoomGoods(scope.row, 0)">下架</el-button>
                      <el-button type="text" size="medium" @click="deleteLiveRoomGoods(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="mar-t-10 mar-b-10 text-align-r">
                  <el-pagination background @size-change="handleRoomGoodsSizeChange" @current-change="handleRoomGoodsCurrentChange" :current-page="searchRoomGoodsQuery.currentPage" :page-sizes="[5, 10, 50, 100]" :page-size="searchRoomGoodsQuery.size" layout="total, sizes, prev, pager, next, jumper" :total="roomGoodsTotal"></el-pagination>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="设置" name="2">
              <div class="v-align-c mar-t-30">
                <label>可观看直播门店：</label>
                <el-radio v-model="radio" label="0" :disabled="booleanFlag" @change="saveLiveRoom">全部门店</el-radio>
                <el-radio v-model="radio" label="1" :disabled="booleanFlag" @change="saveLiveRoom">部分门店</el-radio>
                <div v-if="radio === '1' && !booleanFlag">
                  <span class="link-color" @click="pageRoomMember()">
                    <a>添加店</a>
                  </span>
                  <span class="link-color mar-l-20" @click="deleteByLiveRoomId()">
                    <a>移除所有非默认店</a>
                  </span>
                </div>
              </div>
              <div class="watch-shop">
                <div class="flex flex-between">
                  <div class="tip-title" v-if="radio !== '1'">所有店均可以观看直播</div>
                </div>
                <ul class="list-wrap" v-if="radio === '1'">
                  <li class="flex shop-list" v-if="liveRoomApply.applyCode">
                    <div class="imgbox">
                      <img :src="liveRoomApply.avatar" alt />
                    </div>
                    <div class="flex-item list-default">{{liveRoomApply.nickname}}(默认)</div>
                    <div class="link-color" v-if="false">
                      <a>移除</a>
                    </div>
                  </li>
                  <li class="flex shop-list" v-for="(item, index) in memberList" :key="index">
                    <div class="imgbox">
                      <img :src="item.avatar" alt />
                    </div>
                    <div class="flex-item">{{item.nickname}}</div>
                    <div class="link-color" @click="deleteByRoomMemberId(item)" v-if="!booleanFlag">
                      <a>移除</a>
                    </div>
                  </li>
                </ul>
                <!-- 当数据长度超过18的时候显示分页 -->
                <div class="text-align-r mar-t-10 mar-b-10" v-if="countLenth > 18">
                  <el-pagination layout="prev, pager, next" :total="50"></el-pagination>
                  <div>
                    <div class="float-l">
                      <el-input @keyup.enter.native="handleSearch" v-model="searchKeyword"
                        clearable placeholder="请输入商品名称" style="width: 228px" class="mar-r-16"></el-input>
                      <el-button class="group-b-left" type="primary" size="small" @click="handleSearch">查询</el-button>
                      <el-button class="group-b-right" size="small" @click="resetSearch">重置</el-button>
                    </div>
                    <br>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <!-- 产品说切换 全部门店/部分门店时直接保存，企业按钮操作也是直接保存
    <div class="pad-b-30" style="padding-top:38px;">
      <el-button @click="$router.go(-1)">返回</el-button>
      <el-button type="primary" @click="saveLiveRoom()">保存</el-button>
    </div>
    -->
    <el-dialog :visible.sync="dialogTableVisible" width="40%" :show-close="false">
      <div class="pad-30">
        <div class="flex flex-between mar-b-10">
          <div>
            <el-input v-model="searchListQuery.nickname" placeholder="请输入店长昵称、店长姓名或手机号" class="width-300"></el-input>
            <el-button-group class="mar-l-10">
              <el-button type="primary" @click="addRoomMember()">查询</el-button>
              <el-button @click="resetSearch()">重置</el-button>
            </el-button-group>
          </div>
          <el-button @click="dialogTableVisible = false">关闭</el-button>
        </div>
        <div>
          <el-button type="primary" @click="addRoomMember()">批量选择</el-button>
        </div>
        <el-table :data="liveRoomList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column property="nickname" label="店长昵称"></el-table-column>
          <el-table-column property="name" label="店长姓名"></el-table-column>
          <el-table-column property="phone" label="手机号"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" @click="addRoomMember(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="mar-t-10 mar-b-10 text-align-r">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchListQuery.currentPage" :page-sizes="[5, 10, 50, 100]" :page-size="searchListQuery.size"
            layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
        </div>
      </div>
    </el-dialog>

    <!-- 导入商品 弹窗 -->
    <el-dialog title="导入商品" :visible.sync="dialogFormVisible" :close-on-press-escape="true" width="650px">
      <div class="pad-10">
        <div class="pad-5" style="background:#f2f2f2">
          <el-input clearable placeholder="请输入商品名称" style="width: 228px" class="mar-r-16" v-model="liveGoodsTitle"></el-input>
          <el-button class="group-b-left" type="primary" size="small" @click="pageLiveGoods">查询</el-button>
          <el-button class="group-b-right" size="small" @click="resetLiveGoods">重置</el-button>
        </div>
        <div class="mar-t-20">
          <el-table :data="liveGoodsList"  @selection-change="handleGoodsSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="商品名称" width="300px" prop="title"></el-table-column>
            <el-table-column label="价格">
              <template slot-scope="scope">
                {{scope.row.minPrice}} - {{scope.row.maxPrice}}
              </template>
            </el-table-column>
          </el-table>
          <div class="mar-t-10 mar-b-10 text-align-r">
            <el-pagination background @size-change="handleGoodsSizeChange" @current-change="handleGoodsCurrentChange" :current-page="searchGoodsQuery.currentPage" :page-sizes="[5, 10, 50, 100]" :page-size="searchGoodsQuery.size"
                           layout="total, sizes, prev, pager, next, jumper" :total="goodsTotal"></el-pagination>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="selectLiveGoods">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { getLiveRoom, deleteByLiveRoomId, saveLiveRoom, pagingMember, saveBatchByLiveRoomId, listLiveRoomMember, deleteByRoomMemberId, pagingLiveRoomGoods, addLiveRoomGoods, updateLiveRoomGoods, deleteLiveRoomGoods } from '@/api/user/liveRoom'
  import { pageLiveGoods } from '@/api/goods/liveGoods'
  import goodsList from './goods-list'
  export default {
    components: { goodsList },
    data() {
      return {
        countLenth: 4,
        activeName: '1',
        radio: '0',
        liveRoomId: '',
        dialogTableVisible: false,
        dialogFormVisible: false, // 导入商品弹窗
        dialogPlayerVisible: false, // 主播弹窗
        booleanFlag: true,
        inputValue: '',
        liveRoom: {},
        applyId: '',
        liveRoomApply: {},
        total: null,
        goodsTotal: null,
        roomGoodsTotal: null,
        multipleSelection: [],
        multipleGoodsSelection: [],
        searchListQuery: {
          enterpriseId: this.getEnterpriseId(),
          veekrayStatus: 1,
          currentPage: 1,
          size: 5,
          nickname: ''
        },
        searchGoodsQuery: {
          enterpriseId: this.getEnterpriseId(),
          currentPage: 1,
          size: 5,
          title: ''
        },
        searchRoomGoodsQuery: {
          enterpriseId: this.getEnterpriseId(),
          currentPage: 1,
          size: 5,
          title: ''
        },
        liveRoomList: [],
        liveGoodsTitle: '',
        liveGoodsList: [],
        liveRoomGoodsTitle: '',
        liveRoomGoodsList: [],
        memberList: [],
        dict: {
          goodsStatus: {}
        }
      }
    },
    created() {
      const queryParams = this.getCurrentPage().query
      if (queryParams.liveRoomId) {
        this.liveRoomId = queryParams.liveRoomId
        this.initLiveRoom()
        this.initListMember()
        this.pageLiveGoods()
      }
    },
    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.pageRoomMember()
      },
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.pageRoomMember()
      },
      handleGoodsSelectionChange(val) {
        this.multipleGoodsSelection = val
      },
      handleGoodsSizeChange(val) {
        this.searchGoodsQuery.size = val
        this.pageLiveGoods()
      },
      handleGoodsCurrentChange(val) {
        this.searchGoodsQuery.currentPage = val
        this.pageLiveGoods()
      },
      applyDetail() {
        this.$router.push({ path: '/live/member-live/edit/index', query: { applyId: this.liveRoomApply.applyId }})
      },
      pageRoomMember() {
        pagingMember(this.searchListQuery).then(response => {
          if (response.isError) return
          this.liveRoomList = response.data.records
          this.total = response.data.total
          this.dialogTableVisible = true
        })
      },
      initListMember() {
        listLiveRoomMember(this.liveRoomId).then(response => {
          if (response.isError) return
          this.memberList = response.data
        })
      },
      addRoomMember(row) {
        const memberIds = []
        if (row) {
          memberIds.push(row.memberId)
        } else {
          this.multipleSelection.forEach(e => {
            memberIds.push(e.memberId)
          })
        }
        saveBatchByLiveRoomId(memberIds.join(','), this.liveRoomId).then(response => {
          if (response.isError) return
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.initListMember()
          this.pageRoomMember()
        })
      },
      handleSearch() {
        this.pageRoomMember()
      },
      resetSearch() {
        this.searchListQuery = {
          enterpriseId: this.getEnterpriseId(),
          currentPage: 1,
          size: 5,
          title: ''
        }
        this.pageRoomMember()
      },
      deleteByLiveRoomId() {
        deleteByLiveRoomId(this.liveRoomId).then(response => {
          if (response.isError) return
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.initListMember()
        })
      },
      deleteByRoomMemberId(row) {
        deleteByRoomMemberId(row.roomMemberId).then(response => {
          if (response.isError) return
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.initListMember()
        })
      },
      initLiveRoom() {
        getLiveRoom(this.liveRoomId).then(response => {
          if (response.isError) return
          this.liveRoom = response.data
          if (response.data.liveRoomApply) {
            this.liveRoomApply = response.data.liveRoomApply
            this.applyId = this.liveRoomApply.applyId
          }
          this.radio = response.data.watchMember ? response.data.watchMember + '' : '0'
          if (response.data.liveStatus === 102 || response.data.liveStatus === 105) {
            this.booleanFlag = false
          } else {
            this.booleanFlag = true
          }
          this.pagingLiveRoomGoods()
        })
      },
      saveLiveRoom() {
        this.liveRoom.watchMember = this.radio
        saveLiveRoom(this.liveRoom).then(response => {
          if (response.isError) return
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          // this.$router.go(-1)
        })
      },
      selectLiveGoods() {
        if (!this.multipleGoodsSelection.length) {
          this.$message.error('请选择商品')
          return
        }
        addLiveRoomGoods({
          liveGoodsIds: this.multipleGoodsSelection.map(item => item.liveGoodsId),
          roomId: this.liveRoom.roomId,
          enterpriseId: this.getEnterpriseId(),
          appId: this.liveRoom.appId
        }).then(response => {
          if (response.isError) return
          this.dialogFormVisible = false
          this.pagingLiveRoomGoods()
        })
      },
      resetLiveGoods() {
        this.liveGoodsTitle = ''
        this.pageLiveGoods()
      },
      pageLiveGoods() {
        this.searchGoodsQuery.auditStatus = 2
        this.searchGoodsQuery.title = this.liveGoodsTitle
        pageLiveGoods(this.searchGoodsQuery).then(response => {
          if (response.isError) return
          this.liveGoodsList = response.data.records
          this.goodsTotal = response.data.total
        })
      },
      resetLiveRoomGoods() {
        this.searchRoomGoodsQuery = {
          enterpriseId: this.getEnterpriseId(),
          currentPage: 1,
          size: 5,
          title: ''
        }
        this.pagingLiveRoomGoods()
      },
      pagingLiveRoomGoods() {
        this.searchRoomGoodsQuery.title = this.liveRoomGoodsTitle
        this.searchRoomGoodsQuery.roomId = this.liveRoom.roomId
        this.searchRoomGoodsQuery.appId = this.liveRoom.appId
        pagingLiveRoomGoods(this.searchRoomGoodsQuery).then(response => {
          if (response.isError) return
          Object.assign(this.dict, response.data.dict)
          this.dict.goodsStatus = this.dict.upDwonStatusFlag
          this.liveRoomGoodsList = response.data.records
          this.roomGoodsTotal = response.data.total
        })
      },
      handleRoomGoodsSizeChange(val) {
        this.searchRoomGoodsQuery.size = val
        this.pagingLiveRoomGoods()
      },
      handleRoomGoodsCurrentChange(val) {
        this.searchRoomGoodsQuery.currentPage = val
        this.pagingLiveRoomGoods()
      },
      updateLiveRoomGoods(row, goodsStatus) {
        row.goodsStatus = goodsStatus
        updateLiveRoomGoods(row).then(response => {
          if (response.isError) return
          this.pagingLiveRoomGoods()
        })
      },
      deleteLiveRoomGoods(row) {
        deleteLiveRoomGoods(row).then(response => {
          if (response.isError) return
          this.pagingLiveRoomGoods()
        })
      }
    }
  }
</script>
<style lang="less" scoped>
.app-main {
  min-height: 100%;
  padding: 20px;
  background: #F7F9FB;
}
.bgc-default1 {
  // background: rgb(248, 249, 251);
  min-height: calc(100vh - 50px);
  /deep/ .circle-2-tab.tab-1 .el-tabs__nav{
    width: 320px;
  }
  /deep/ .circle-2-tab .el-tabs__header {
    background: white !important;
    .is-top {
      border: none;
    }
  }
}
.circle-2-tab .el-tabs__nav {
  width: 305px !important;
}
.link-color {
  color: #409EFF;
}
.base-info {
  background: white;
  // padding: 15px 15px;
  font-size: 16px;
  display: flex;
  justify-content: left;
  align-items: center;
  margin-left: -15px;
  .base-info_item{
    // height: 267px;
    width: 100%;
    padding: 30px 18px;
    box-sizing: border-box;
    box-shadow: 0 0 14px 2px rgba(154, 154, 154, 0.18);
    justify-content: space-between;
    .room-img-box {
      img {
        width: 214px;
        height: 164px;
      }
    }
    .bule-dot {
      width: 8px;
      height: 8px;
      background: #409EFF;
      border-radius: 50%;
    }
  }
}
.list-wrap {
  background-color: #F7F9FB;
  padding: 0 20px 20px;
  display: flex;
  flex-wrap: wrap;
}
.row_label {
  display: inline-block;
  font-size: 14px;
  color: #999999;
}
.vertical-line {
  width: 2px;
  background: #999999;
  height: 100%;
  margin: 0 15px;
}
.watch-shop {
  background: white;
  padding-bottom: 30px;
  .tip-title {
    margin-left: 95px;
    font-size: 12px;
    color: #999999;
    margin-top: 5px;
  }
}
.shop-list {
  flex-basis: 1;
  width: 254px;
  height: 90px;
  display: flex;
  align-items: center;
  font-size: 16px;
  background-color: white;
  margin-left: 15px;
  margin-top: 20px;
  border-radius: 6px;
  padding: 0 15px;
  box-sizing: border-box;
  position: relative;
  &:first-child{
    margin-left: unset;
  }
  &:nth-child(6n + 1){
    margin-left: unset;
  }
  &:hover{
    border: 1px solid #3699FF;
    box-shadow: 0 0 6px 0px rgba(134, 185, 237, 0.35);
    .link-color{
      display: block;
    }
  }
  .link-color {
    display: none;
    font-size: 13px;
    position: absolute;
    right: 15px;
    bottom: 10px;
  }
  .imgbox {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 20px;
    img {
      width: 55px;
      height: 55px;
      border-radius: 50%;
    }
  }
}
.list-default {
  font-weight: bold;
}
.list-bar {
  background: white;
}
</style>
